<template>
  <div>
    <el-breadcrumb  separator="/" class="bread-title">
       <el-breadcrumb-item :to="{ path: '/investmentDistributionRule' }">跟投分配规则</el-breadcrumb-item>
       <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <h3>跟投分配比例设置</h3>
    <hr>
    <p>规则名称：{{info.name}}</p>
    <p>*跟投类型：{{initType(info.type)}}</p>
    <p>定向跟投分配占比：{{info.directionalProportion}}%</p>
    <p>募集跟投分配占比：{{info.raiseProportion}}%</p>
    <h3>内部员工跟投分配比例详情</h3>
    <hr>
    <el-table :data="distributionDetailList" border 
    :span-method="objectSpanMethod" highlight-current-row
    :summary-method="getSummaries"
    show-summary
    >
        <el-table-column  type="index" prop="type" label="序号" width="50" align="center"></el-table-column>
        <el-table-column  label="业务线" prop="businessName"  align="center">
        </el-table-column>
        <el-table-column label="占比（业务线）%" prop="businessProportion" align="center">
        </el-table-column>
        <el-table-column label="比例（部门）%" prop="departmentProportion" align="center">
          <template slot-scope="scope">
            {{scope.row.departmentProportion?scope.row.departmentProportion:'-'}}
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" align="center">
          <template slot-scope="scope">
              {{scope.row.departmentName?scope.row.departmentName:'-'}}
          </template>
        </el-table-column>
        <el-table-column label="职级" prop="rankName" align="center">
          <template slot-scope="scope">
              {{scope.row.rankName?scope.row.rankName:'-'}}
          </template>
        </el-table-column>
        <el-table-column label="比例（职级）%" prop="rankProportion" align="center">
        </el-table-column>
        <el-table-column label="绝对值（职级）%" prop="rankMagnitude" align="center">
        </el-table-column>
    </el-table>

   <h3>操作记录</h3>
   <el-table :data="logInfoList" border >
       <el-table-column label="操作" prop="operationInfo" align="center">
       </el-table-column>
       <el-table-column label="操作人" prop="operationUsername"  align="center">
       </el-table-column>
       <el-table-column label="角色" prop="roleName" align="center">
       </el-table-column>
       <el-table-column label="时间" prop="createDate" align="center">
       </el-table-column>
       <el-table-column label="备注" prop="remark" align="center"></el-table-column>
   </el-table>

    <p style="display:table;margin:40px auto">
       <el-button  type="primary" @click="cancel">关闭</el-button> 
    </p>
  </div>
</template>

<script>
  import api from '@/api/apiPath'
  export default {
    data() {
      return {
        info:{},
        logInfoList:[],
        distributionDetailList:[],
        id:undefined,
        spanArr: [],//二维数组，用于存放单元格合并规则
        position: 0,//用于存储相同项的开始index
      };
    },
    created(){
      this.id = this.$route.query.id
      this.getinfodata()
    },
    methods: {
        cancel(){
          this.$router.push({path:"/investmentDistributionRule"})
        },
        getSummaries(param) {
           return ["合计", ,100,,,,,100];
        },
        initType(val){
          if (val == 0) {
            return '定向'
          }else if (val == 1) {
             return '募集'
          }else if (val == 2) {
            return '定向+募集'
          }
        },
        rowspan(idx, prop) {
          this.spanArr[idx] = [];
          this.position = 0; 
          let len = 0; 
          this.distributionDetailList.forEach((item,index) => {
            if( index === 0){
              this.spanArr[idx].push(1);      
              this.position = 0;
            }else{
              if(this.distributionDetailList[index][prop] === this.distributionDetailList[index-1][prop] ){
                this.spanArr[idx][this.position] += 1;//有相同项
                this.spanArr[idx].push(0); // 名称相同后往数组里面加一项0
              }else{
                this.spanArr[idx].push(1);//同列的前后两行单元格不相同
                this.position = index;
              }
            }
          })
        },
          //表格单元格合并
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            for(let i = 1; i<5; i++) {
              if(columnIndex === i){
                 const _row = this.spanArr[i][rowIndex];
                 const _col = _row>0 ? 1 : 0;
                 // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
                 return {
                   rowspan: _row,
                   colspan: _col
                 }
              }
            }
      },
      getinfodata(){
        this.axios.get(api.DISTRIBUTTIONVIEW+this.id).then(res=>{
          if (res.data.code == 200) {
              this.info=res.data.data
              this.logInfoList = res.data.data.logInfoList
              this.distributionDetailList = res.data.data.distributionDetailList
              this.rowspan(1,'businessId')
              this.rowspan(2,'businessId')
              this.rowspan(3,'departId')
              this.rowspan(4,'departId')
          }
        })
      },
    }
  };
</script>

<style lang="stylus">
	
</style>
